带有javascript函数的HTML短语标记

Question

I'm looking the way to markup a phrase in an html with a javascript function. The thing is, I have a HTML page with a lot of words but I need to markup the phrase every time that appear. Does anyone has any idea how to do this?

Answer 1

You can find with keyword like html replace or something which will be well suited to your situation.

By using gulp, there is gulp-html-replace module ( https://www.npmjs.com/package/gulp-html-replace )

Answer 2

Assuming that all your text is within p-tags, you can select all paragraphs by

var allP = document.getElementsByTagName("P")

Then loop over allP and get the html of the tag.

for (var i; i< allP.length; i++) {
    var thisP = allP[i];
    var htmlP = thisP.innerHTML;
}

Then you can split htmlP with your phrase (in the for loop), eg:

var partsP = htmlP.split("I want to be highlighted");

And den rebuilt your html:

var newHtmlP = "";
for (var j; j < partsP.length; j++) {
    newHtmlP = newHtmlP + partsP[j] + '<span style="color:red">I want to be highlithed</span>';
}

You have to make sure, that the phrase is not appended one time to much at the end (I did not implement this here). Finally you set the inner html:

thisP.innerHTML = newHtmlP;