Question

我有一个战利品框div，其中（有时）名称 color 进来。例如：

<div id="columns">
<div id="loot">
<b>
"Loot: Colorful blade "
<br>
" slot: weapon "
<br>
" value: 7"
</b>
...more and more and more

现在如果 loot div 中的文字包含 colorful我想添加 a课程多彩。所以我认为如果文本多彩就在其中，它会在多彩这个词周围添加<span>并指定一个类到它。但我无法弄清楚如何做到这一点。

我尝试了this (jsfiddle)

Answer 1

您的代码在尝试添加彩虹类时会以#loot元素为目标，但在首先查找文本时是否以所需的div为目标？（我不认为它确实如此，但不知道，因为我不jQuery）

这里有一些代码可以做到jans：

var tgtElem = document.getElementById('loot');
var value = tgtElem.innerHTML;
value = value.replace('Colorful', '<span class="highlight">Colorful</span>');
tgtElem.innerHTML = value;

它依赖于css规则.highlight - 根据需要设置其样式。

这是一个功能齐全的例子：

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}
//////////////////////////////////////////////////////////////////////////////

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    var tgtElem = byId('loot');
    var value = tgtElem.innerHTML;
    value = value.replace('Colorful', '<span class="highlight">Colorful</span>');
    tgtElem.innerHTML = value;
}
</script>
<style>
.highlight
{
    background-color: yellow;
    font-weight: bold;
}
</style>
</head>
<body>
    <div id="columns">
        <div id="loot">
            <b>
            Loot: Colorful blade 
            <br>
             slot: weapon 
            <br>
             value: 7
            </b>
            <br />
            <br />
            <b>Current slot: weapon <br> Current weapon :  Colorful blade  <br> Current value: 7</b>
        </div>
    </div>
</body>
</html>

Answer 2

您需要链接到libary才能使jQuery正常工作。

你可以在这里https://code.jquery.com/

使用单词周围的范围也是正确的。这是一个工作版本

Loot: <span>Colorful</span> blade

然后定位它以添加类

    if ($('#loot:contains("Colorful")').length > 0) {

     var str = document.getElementById("loot").innerHTML; 
     var res = str.replace("Colorful", "<span>Colorful</span>");
     document.getElementById("loot").innerHTML = res;

     $("#loot span").addClass("rainbow");
}

https://jsfiddle.net/o7phybe8/6/

div / bold包含文本给出类

2 个答案: