div /粗体包含文本给出类[重复]答案

【问题标题】：div / bold contains text give class [duplicate]div /粗体包含文本给出类[重复]
【发布时间】：2016-06-14 13:32:42
【问题描述】：

我有一个 loot 盒子 div，其中（有时）名称是 colorful。例如：

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

现在if loot div 中的文本 contains colorful 我想添加一个类文本 colorful 。所以我认为 if 文本 colorful 在其中，它会在单词 colorful 周围放置一个<span> 并分配一个 class 给它。但我不知道该怎么做。

我试过this (jsfiddle)

【问题讨论】：

您的代码有效，您根本没有在该小提琴中加载 jquery。 jsfiddle.net/o7phybe8/1
我不希望整个 div 是 rainbow 只是文本 colorful @gurvinder372
一个围绕just单词“Colorful”的跨度，并将类名应用到该跨度，或者将类名添加到整个<div>？跨度>
您可能需要尝试在 jsfiddle 中复制内容的创建...解决此问题的方法是在创建内容后立即执行功能
感谢@DaniP 成功了 :) 我在加载内容后正确添加了它

标签： javascript jquery html css

【解决方案1】：

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

这里有一些没有 jQuery 的代码：

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>

【讨论】：

无法让它看起来工作。不在我的代码中，也不在 Jsfiddle
JSfiddle 最近发生了变化。我再也找不到将 JS 放入头部的选项，而无需将其包裹在任何东西中。这可以防止onDocLoaded 函数触发。我还注意到您可能有多个实例要替换 - 在这种情况下，我的代码将失败，只替换第一个。要获取所有实例，您需要使用正则表达式 - 本质上，这意味着用正斜杠包裹替换文本（我想，我忘记了），然后在表达式后附加 g。更改为函数也相当容易，因此您可以突出显示任何单词

【解决方案2】：

您需要链接到库才能使 jQuery 工作。

您可以在这里获取它https://code.jquery.com/

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

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/

【讨论】：

如果您正在寻找更动态的方法，我建议您使用 enhzflep 代码
如果页面上的不同 div （即 #loot 以外的一个 div）包含“Colorful”一词怎么办？是否仍然打算在#loot 元素中设置单词实例（如果存在）的样式？
Colorful 并不总是在那里，所以我不能在它周围硬核span，因为它不在那里还，也许它不会那里
我已经用更有用的方法更新了我的答案，以解决其中一些问题