React: select event in div with multiple span elements

I have a React component with parsed text:

The html structure is like:

<div>

    <span>It's a </span>

    <span className="highlight-text">cat</span>

</div>

How I can have a event listener which enable I pass all selected text within this div? For example, if I select "a ca", the event listener can get e.target.value = "a ca".

It is possible the highlight part will be repeating within the full text, for example:

<div>

    <span>It's a slim cat, not a fat </span>

    <span className="highlight-text">cat</span>

</div>

In this case, the selection listener will get 2nd part string, start position of whole text.

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

add a comment |

I have a React component with parsed text:

The html structure is like:

<div>

    <span>It's a </span>

    <span className="highlight-text">cat</span>

</div>

How I can have a event listener which enable I pass all selected text within this div? For example, if I select "a ca", the event listener can get e.target.value = "a ca".

It is possible the highlight part will be repeating within the full text, for example:

<div>

    <span>It's a slim cat, not a fat </span>

    <span className="highlight-text">cat</span>

</div>

In this case, the selection listener will get 2nd part string, start position of whole text.

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

add a comment |

I have a React component with parsed text:

The html structure is like:

<div>

    <span>It's a </span>

    <span className="highlight-text">cat</span>

</div>

How I can have a event listener which enable I pass all selected text within this div? For example, if I select "a ca", the event listener can get e.target.value = "a ca".

It is possible the highlight part will be repeating within the full text, for example:

<div>

    <span>It's a slim cat, not a fat </span>

    <span className="highlight-text">cat</span>

</div>

In this case, the selection listener will get 2nd part string, start position of whole text.

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

I have a React component with parsed text:

The html structure is like:

<div>

    <span>It's a </span>

    <span className="highlight-text">cat</span>

</div>

How I can have a event listener which enable I pass all selected text within this div? For example, if I select "a ca", the event listener can get e.target.value = "a ca".

It is possible the highlight part will be repeating within the full text, for example:

<div>

    <span>It's a slim cat, not a fat </span>

    <span className="highlight-text">cat</span>

</div>

In this case, the selection listener will get 2nd part string, start position of whole text.

javascript html reactjs

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

edited Nov 15 '18 at 17:10

asked Nov 15 '18 at 1:44

Jie Hu

14919

asked Nov 15 '18 at 1:44

Jie Hu

14919

asked Nov 15 '18 at 1:44

Jie Hu

14919

add a comment |

2 Answers
2

active

oldest

votes

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk

answered Nov 15 '18 at 2:31

Jie Hu

14919

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

add a comment |

This is the first thing that comes to mind.

// Example impl

<Component text="This is a cat" highlight="is a" />



// Component render

render() {

    const {

        text,

        highlight,

    } = this.props;

    // Returns the start index for your high light string

    // in our example 'is a' starts at index 5

    const startHighlightTextIdx = text.search(highlight);



    // Create a substring for the first part of the string

    // ie: 'This is '

    const startText = text.substring(0, startHighlightTextIdx);



    // Create a substring for the last part of the string

    // For this substr we want to start where our startHighlightTextIdx starts 

    // and we want to add the length of the highlighted string

    // in order to ignore the highlighted string

    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end

    const endText = text.substring(

        startHighlightTextIdx + highlight.length,

    );

    <div>

        <span>{startText}</span>

        <span className="highlight-text">{highlight}</span>

        <span>{endText}</span>

    </div>

}



v2:

// This might be a cleaner solution

// explode by the hightlight string and grab index 0 and last

// this outputs ["This ", " cat"]

const textParts = text.split(highlight);

const startText = textParts[0];

const endText = textParts[1];

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

1

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311281%2freact-select-event-in-div-with-multiple-span-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk

answered Nov 15 '18 at 2:31

Jie Hu

14919

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

add a comment |

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk

answered Nov 15 '18 at 2:31

Jie Hu

14919

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

add a comment |

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk

answered Nov 15 '18 at 2:31

Jie Hu

14919

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk

answered Nov 15 '18 at 2:31

Jie Hu

14919

answered Nov 15 '18 at 2:31

Jie Hu

14919

answered Nov 15 '18 at 2:31

Jie Hu

14919

answered Nov 15 '18 at 2:31

Jie Hu

14919

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

add a comment |

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

this solution also can not get start position of highlight if there're duplicated hightlights in text
– Jie Hu
Nov 15 '18 at 17:13

add a comment |

This is the first thing that comes to mind.

// Example impl

<Component text="This is a cat" highlight="is a" />



// Component render

render() {

    const {

        text,

        highlight,

    } = this.props;

    // Returns the start index for your high light string

    // in our example 'is a' starts at index 5

    const startHighlightTextIdx = text.search(highlight);



    // Create a substring for the first part of the string

    // ie: 'This is '

    const startText = text.substring(0, startHighlightTextIdx);



    // Create a substring for the last part of the string

    // For this substr we want to start where our startHighlightTextIdx starts 

    // and we want to add the length of the highlighted string

    // in order to ignore the highlighted string

    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end

    const endText = text.substring(

        startHighlightTextIdx + highlight.length,

    );

    <div>

        <span>{startText}</span>

        <span className="highlight-text">{highlight}</span>

        <span>{endText}</span>

    </div>

}



v2:

// This might be a cleaner solution

// explode by the hightlight string and grab index 0 and last

// this outputs ["This ", " cat"]

const textParts = text.split(highlight);

const startText = textParts[0];

const endText = textParts[1];

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

1

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

add a comment |

This is the first thing that comes to mind.

// Example impl

<Component text="This is a cat" highlight="is a" />



// Component render

render() {

    const {

        text,

        highlight,

    } = this.props;

    // Returns the start index for your high light string

    // in our example 'is a' starts at index 5

    const startHighlightTextIdx = text.search(highlight);



    // Create a substring for the first part of the string

    // ie: 'This is '

    const startText = text.substring(0, startHighlightTextIdx);



    // Create a substring for the last part of the string

    // For this substr we want to start where our startHighlightTextIdx starts 

    // and we want to add the length of the highlighted string

    // in order to ignore the highlighted string

    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end

    const endText = text.substring(

        startHighlightTextIdx + highlight.length,

    );

    <div>

        <span>{startText}</span>

        <span className="highlight-text">{highlight}</span>

        <span>{endText}</span>

    </div>

}



v2:

// This might be a cleaner solution

// explode by the hightlight string and grab index 0 and last

// this outputs ["This ", " cat"]

const textParts = text.split(highlight);

const startText = textParts[0];

const endText = textParts[1];

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

1

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

add a comment |

This is the first thing that comes to mind.

// Example impl

<Component text="This is a cat" highlight="is a" />



// Component render

render() {

    const {

        text,

        highlight,

    } = this.props;

    // Returns the start index for your high light string

    // in our example 'is a' starts at index 5

    const startHighlightTextIdx = text.search(highlight);



    // Create a substring for the first part of the string

    // ie: 'This is '

    const startText = text.substring(0, startHighlightTextIdx);



    // Create a substring for the last part of the string

    // For this substr we want to start where our startHighlightTextIdx starts 

    // and we want to add the length of the highlighted string

    // in order to ignore the highlighted string

    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end

    const endText = text.substring(

        startHighlightTextIdx + highlight.length,

    );

    <div>

        <span>{startText}</span>

        <span className="highlight-text">{highlight}</span>

        <span>{endText}</span>

    </div>

}



v2:

// This might be a cleaner solution

// explode by the hightlight string and grab index 0 and last

// this outputs ["This ", " cat"]

const textParts = text.split(highlight);

const startText = textParts[0];

const endText = textParts[1];

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

This is the first thing that comes to mind.

// Example impl

<Component text="This is a cat" highlight="is a" />



// Component render

render() {

    const {

        text,

        highlight,

    } = this.props;

    // Returns the start index for your high light string

    // in our example 'is a' starts at index 5

    const startHighlightTextIdx = text.search(highlight);



    // Create a substring for the first part of the string

    // ie: 'This is '

    const startText = text.substring(0, startHighlightTextIdx);



    // Create a substring for the last part of the string

    // For this substr we want to start where our startHighlightTextIdx starts 

    // and we want to add the length of the highlighted string

    // in order to ignore the highlighted string

    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end

    const endText = text.substring(

        startHighlightTextIdx + highlight.length,

    );

    <div>

        <span>{startText}</span>

        <span className="highlight-text">{highlight}</span>

        <span>{endText}</span>

    </div>

}



v2:

// This might be a cleaner solution

// explode by the hightlight string and grab index 0 and last

// this outputs ["This ", " cat"]

const textParts = text.split(highlight);

const startText = textParts[0];

const endText = textParts[1];

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

edited Nov 15 '18 at 2:37

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

answered Nov 15 '18 at 2:29

Fernando Avalos

9116

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

1

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

add a comment |

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

1

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

How if there's duplicates of highlight text part? how to get the start position of selected text?
– Jie Hu
Nov 15 '18 at 3:04

The first impl would ignore additional strings, are you trying to do something like a full text search engine? So for example: This is a string with letters let's say you want the i you want all i's to be highlighted?
– Fernando Avalos
Nov 15 '18 at 13:41

Yeal, I tried this, but when the text has repeated highlight parts, I don't know how I can get start position of the highlight in whole text within div. Do you have any suggestions? thanks a lot,
– Jie Hu
Nov 15 '18 at 17:12

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk