我正在處理一個專案，如果我們在陣列中找到它，我想更改給定單詞的文本顏色。例如，我有一個陣列
["Lorem","nemo"]
，我得到的文本來自 body 標簽
這是我的索引檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="body">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>
<div>
Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups in the
match using matchAll() better than match().
</div>
<script src="main.js"></script>
</body>
</html>
這是我的 javascript
function change(){
var text = document.querySelector("body");
var string = text.innerHTML;
// let searching = ["Lorem", "nemo","amet","better","matchAll"];
let searching = ["Lorem","nemo"];
// search
for(search of searching){
var textfind = string.matchAll(search)
for(m of textfind){
// console.log(m[0])
let statring_index = m.index;
let ending_index = m[0].length;
let giventext = string.substring(statring_index, statring_index ending_index)
console.log(giventext)
// giventext = giventext.replace("/" m[0] "/g","<span style='color:red';>" giventext "</span>")
// document.write("<span style='color:red;>" m[0] "</span>")
var redText = string.substring(statring_index, statring_index ending_index);
text.innerHTML = string.substring(0,statring_index) "<a style='color:red;'>" redText "</a>" string.substring(statring_index ending_index);
}
}
}
change()
現在的問題是，我希望所有出現的事件都是紅色，但我的代碼只能更改陣列中的最后一個元素一次
因此，如果我們在搜索陣列中有該單詞，我想將所有出現的內容更改為紅色
uj5u.com熱心網友回復：
text.innerHTML = string.substring(...)在回圈內部，它一遍又一遍地更新檔案正文，只有最后一次更新才生效。string 是不可變的，
string.substring不會更新string變數而是回傳一個新副本。但是代碼中沒有對新的字串變數賦值。
簡單的替換實際上可以作業
const searching = ["Lorem","nemo"];
let str = document.querySelector("body").innerHTML;
searching.forEach(term => {
str = str.replaceAll(term, `<a style="color:red;">${term}</a>`);
});
document.querySelector("body").innerHTML = str;
不區分大小寫并將整個單詞與捕獲組匹配
const searching = ["Lorem","nemo"];
let str = document.querySelector("body").innerHTML;
searching.forEach(term => {
str = str.replace(new RegExp(`(\\b${term}\\b)`, 'gi'), '<a style="color:red;">$1</a>');
});
document.querySelector("body").innerHTML = str;
uj5u.com熱心網友回復：
您可能會發現此方法更容易。它遍歷 div 元素，然后在該單詞上使用簡單的正則運算式 with 遍歷單詞replaceAll，最后將 HTML 分配回 div 的innerHTML.
const arr = ['Lorem', 'nemo', 'sequi', 'we'];
const divs = document.querySelectorAll('div');
// Iterate over the divs
divs.forEach(div => {
// Assign the innerText of the current div
// to a new variable called html
let html = div.innerText;
// Now iterate over the words
arr.forEach(word => {
// Create a global regex with that word
const regex = new RegExp(word, 'g');
// Replace all the instances of that word in the
// html variable, and assign it back to that variable
html = html.replaceAll(regex, (match) => {
return `<span >${match}</span>`;
});
});
// Finally assign the html to back to the div
div.innerHTML = html;
});.red { color: red; }
div { margin-bottom: 1em; }<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit Lorem fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>
<div>
Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups in the match using matchAll() better than match().
</div>uj5u.com熱心網友回復：
這是你可以做的。沒有檢查它是否優化過。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="body">
<div class="change-color">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
exercitationem maxime, aperiam saepe lorem fuga nemo ipsa labore rerum ex error fugiat quasi accusantium
nemo.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium
nemo.
</div>
<div>
Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups
in the
match using matchAll() better than match().
</div>
<script src="main.js"></script>
<script>
const searching = ["Lorem", "nemo"];
const strings = document.querySelectorAll('.change-color').forEach(el => {
let text = el.innerText;
searching.map(search => {
text = text.replaceAll(search, `<span style="color: red;">${search}</span>`);
});
// el.innerHTML = text;
el.innerHTML = text;
// console.log(el.innerText);
})
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/363065.html
標籤：javascript 数组 网络
上一篇：SSG如何在Nuxt中作業？