更改陣列中單詞的顏色-有解無憂

如果我有javascript array一句話

var keywords = ["select","from","where","mars"];

和包含文本的 HTML 元素

<div id="mytext">Hello from planet mars</div>

如何使用javascript橙色mytext為陣列中單詞串列的此元素中找到的任何單詞著色keywords！

更改陣列中單詞的顏色

uj5u.com熱心網友回復：

這是一種方法：

var keywords = ["select", "from", "where", "mars"];

let originalText = document.querySelector("#mytext").innerText

for (const word of keywords) {
  originalText = originalText.replace(new RegExp(word, "g"), `<span >${word}</span>`)
}

document.querySelector("#mytext").innerHTML = originalText

.orange {
  color: orange;
}

<div id="mytext">Hello from planet mars</div>

我們正在迭代關鍵字并用新內容替換innerHTML，我們將用一個標記包裝關鍵字的提及，并為其賦予顏色。

uj5u.com熱心網友回復：

var keywords = ["select","from","where","mars"];
let div = document.getElementById('mytext')
let text_content = div.textContent.split(' ')

let html = text_content.map(e => {

    return keywords.includes(e) ? `<span class='orange'>${e}</span>` : e })

div.innerHTML = html.join(' ')

.orange{
  color:orange;
  }

<div id="mytext">Hello from planet mars</div>

uj5u.com熱心網友回復：

        <html>
        <head></head>
        <body>
        <div id="mytext">Hello from planet mars</div>
            <script>
                var keywords = ["select","from","where","mars"];
                mytext=document.getElementById("mytext");
                len=keywords.length;
                for(i=0;i<len;i  ){
                    mytext.innerHTML=mytext.innerHTML.replace(keywords[i],"<span style='color:orange;'>"  keywords[i]  "</span>");
                }
                
            </script>
        <body>

您可以使用此代碼并將橙色替換為您想要的顏色

var keywords = ["select","from","where","mars"];
                mytext=document.getElementById("mytext");
                len=keywords.length;
                for(i=0;i<len;i  ){
                    mytext.innerHTML=mytext.innerHTML.replace(keywords[i],"<span style='color:orange;'>"  keywords[i]  "</span>");
                }

<html>
        <head></head>
        <body>
        <div id="mytext">Hello from planet mars</div>
            
        <body>
 </html>

uj5u.com熱心網友回復：

你可以試試

var keywords = ["select","from","where","mars"];
const el = document.querySelector('#mytext');
keywords.map(kw => el.innerText = el.innerText.replace(new RegExp(kw, 'g'), '<span style="color: oragne">'   kw   '</span>'))
el.innerHTML = el.innerText

uj5u.com熱心網友回復：

另一個正則運算式選項，但從陣列中創建單個正則運算式會導致單個查詢/innerHTML 分配。

const keywords = ["select","from","where","mars"];

const mytext = document.getElementById('mytext');

mytext.innerHTML = mytext.textContent.replace(new RegExp(`\\b${keywords.join('\\b|\\b')}\\b`, 'g'), (match) => `<span class='orange'>${match}</span>`);

.orange {
  color: orange;
}

<div id="mytext">Hello from planet <span class="where">mars</span>, select from fromage mars.</div>

結果正則運算式

/\bselect\b|\bfrom\b|\bwhere\b|\bmars\b/g

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/367570.html

標籤：javascript

上一篇：是否可以通過拋出例外告訴打字稿變數不能被取消定義？

下一篇：如何使輸入可取消？event.preventDefault();