Does quill support getting index of specific word or sentence?

[lisadeng]

Hi all,
I'm not sure if quill supports getting index of specific word or sentence. e.g. I have several images and videos in the editor with several paragraphs as well. Is there any way, I could find out all the words "music" in it, and highlight them with my customized quill class? Seems I can not do it with existing quill apis.
Thanks.

[MuhammedAlkhudiry]

if you want one word use function: String#indexof('myWord').
if you want all words use this custom function:

function getIndicesOf(searchStr, str, caseSensitive) {
    var searchStrLen = searchStr.length;
    if (searchStrLen == 0) {
        return [];
    }
    var startIndex = 0, index, indices = [];
    if (!caseSensitive) {
        str = str.toLowerCase();
        searchStr = searchStr.toLowerCase();
    }
    while ((index = str.indexOf(searchStr, startIndex)) > -1) {
        indices.push(index);
        startIndex = index + searchStrLen;
    }
    return indices;
}

• from Stack Overflow.
• there are multiple ways to it.

however, I'm working in building find & replace module, and this is how I did it:

            let totalText = quill.getText();
            let re = new RegExp('myWord', "g");
           // make suer the text contains the word I want.
            let match = re.test(totalText);
            if (match) {
               let indices = totalText.getIndicesOf(totalText, 'myWord' , true/false);
                let length = 'myWord'.length;

                // apply style..
               indices.forEach(index =>
 quill.formatText(index, length, 'myCustomQuillStyle', true));

you also better save the indices array to remove the style later.

[lisadeng]

@MuhammedAlkhudiry

[lisadeng]

Thank you so much for your help.
Actually, I am afraid that getting index of specific word based on api quill.getText() may return inaccurate word index, since quill.getText() omits non-string content, I think those images/videos and line break will be all omitted. Right?

[MuhammedAlkhudiry]

Thank you so much for your help.
Actually, I am afraid that getting index of specific word based on api quill.getText() may return inaccurate word index, since quill.getText() omits non-string content, I think those images/videos and line break will be all omitted. Right?

yes, getText() return a string that content only the text, for images/videos try and see

but about line break, there is no line break in Quill as I know, lines constructed by divs, inspect it and see for yourself.

[MuhammedAlkhudiry]

after testing, you are right, inserting images will make the indices inaccurate,

however, if you look at getText():

      return this.getContents(index, length).filter(function (op) {
        return typeof op.insert === 'string';
      }).map(function (op) {
        return op.insert;
      }).join('');

typeof op.insert === 'string';

this line means return only text, so I change it to:

return this.getContents(index, length).filter(function (op) {
        return typeof op.insert === 'string' || op.insert.image;
      }).map(function (op) {
         if (op.insert.image) {
          return op.insert.image = 'i';
        }
        return op.insert;
      }).join('');

this line:
typeof op.insert === 'string' || op.insert.image;

means return also the images

also,

 if (op.insert.image) {
          return op.insert.image = 'i';
        }

means when you return the image, name it as 'i' (instead of the full name of the image).

so, if you have words then image then words then image, the output of getText() will be like this:

"word word word word

i

word word word word

i

word word word word

"

and the indices is accurate :)

but, if you want only the text.. we need to separate it to another API called getTextWithImages()
@jhchen

image:

• this is part of my work for find/replace module for Quill.

update

for future visitors, no need to change getText();
use this function:

customGetText() {

        return quill.getContents().filter(function (op) {
            return typeof op.insert === 'string' || op.insert.image;
        }).map(function (op) {
            if (op.insert.image) {
                return op.insert.image = 'i';
            }
            return op.insert;
        }).join('');
    }

[lisadeng]

@MuhammedAlkhudiry
I really appreciate your help. Benefit a lot from your test and advice.
I will have a try as well, and will keep you updated once the issue is figured out.

Many thanks!

[MuhammedAlkhudiry]

you are welcome, one last thing, you don't have to change getText();
you can use this custom function:

customGetText() {

        return quill.getContents().filter(function (op) {
            return typeof op.insert === 'string' || op.insert.image;
        }).map(function (op) {
            if (op.insert.image) {
                return op.insert.image = 'i';
            }
            return op.insert;
        }).join('');
    }

[chaosLegacy]

Hello I'm new to Quill I was wondering if there's a way to manipulate urls generated by Quill, for example checking if the link given by the user is a valid one, and it's only https provided is there a way to do that?

[abecirovic3]

For anyone who might be interested. You could first check whether there are embeds in the editor before looping through the contents ops array.
I'm not entirely sure, but for my use case it worked fine (I have only one custom embed enabled in the editor). Before I start looping, I make the check
if (quill.getLength() - quill.getText(0).length !== 0) { // loop } else { // just use quill.getText() }
I guess the getLength() method takes the embeds in account and for each adds +1 to the length.