从字符串中删除一个字符：不删除内部元素

Question

这个问题让我感到困惑。我想要从一个标签中删除“+”符号。下面是HTML代码：

 <label class="option" for="edit-attributes-21-33">
 <input type="radio" id="edit-attributes-21-33" name="attributes[21]" 
 value="33" checked="checked" class="form-radio"> 4 oz, +$15.00</label>

我从这个开始

$(".option").each(function(index, value) {

$(this).text( $(this).text().replace("+", ""));

})

这样做可以去掉“+”号，但也会删除输入元素。因此我尝试了以下方法：

$(".option").each(function(index, value) {

var oldString = $(this).html();
var newString = oldString.replace("+", "");
console.log(oldString, newString);
$(this).text(newString);

})

这将生成正确的HTML标记字符串，但它是一个字符串并以此方式传递回DOM。我看到了另一篇帖子有相同的问题，但没有解决方案。

- icicleking

---

相关但不完全重复：https://dev59.com/1W855IYBdhLWcg3w3IRh - James Montagne

我不确定您所说的输入元素被剥离是什么意思？请举一个例子，说明它原来是什么，经过当前代码后变成了什么，以及您希望它执行什么操作。例如：原始内容为 Abc + 123 + 456，应该变成 Abc 123 + 456，但是这段代码返回的结果是 Abc 123 456。 - Addo Solutions

Answer 1

您可以使用.html()而不是.text()来实现您想要的代码功能：

$(".option").each(function(index, value) {
    var oldString = $(this).html();
    var newString = oldString.replace("+", "");
    console.log(oldString, newString);
    $(this).html(newString);
});

这里是JQuery的`.html()`方法参考：https://api.jquery.com/html/ 这是Fiddle链接：https://jsfiddle.net/Darkseal/1c572Luw/ 我还稍微修改了你的``结束标签以使其符合XHTML规范。

- Darkseal

---

这看起来与问题中的第二个代码块非常相似。你改变了什么？ - James Montagne

.replace("+", "") 只会替换第一个 "+" 实例；如果你想删除所有 "+" 实例，可以添加全局标志；例如：.replace(/+/g, ' ')。 - joshvito

在编程中，包含对所做更改的解释以及原因是非常有帮助的。此外，在HTML5中，没有斜杠结尾的输入也是完全有效的。我相信只有XHTML需要斜杠。 - James Montagne

我只回答了原帖的问题。无论如何，如果你需要替换所有出现的内容，可以使用.replace(/+/g, "")。 - Darkseal

我不太确定你是如何使输入标签“符合HTML5”的，它是一个空元素。 - Marc

Answer 2

你需要的是一个叫做文本节点的东西。我给你的标签添加了一个ID以方便操作，但对于其他选择器来说，原理仍然相同：

var node = document.getElementById("example").childNodes[2];
node.nodeValue = node.nodeValue.replace("+", "");

这里有一个简单的演示。
在IT技术中，尽量使用纯JS代替jQuery，因为纯JS往往比jQuery更快。

如回答中所说，如果你不知道文本节点的确切位置，请参考此处。

- Martijn

---

如果他不确定textNode的确切位置怎么办？ - jmartins

只使用“纯JavaScript”就找到了一个很棒的解决方案。 - emerson.marini

然后您需要点击“精确位置”链接，并想出一种找到您想要的东西的方法 ;) - Martijn

非常酷，我已经使用了另一种解决方案，但是我有机会会尝试这个。我确实需要循环遍历所有元素，所以我已经在使用jQuery的.each方法，因此我仍然留在jQuery领域。 - icicleking

@Martijn 谢谢你的帮助，我今天遇到了一个类似的问题，字符串中有过多的文本（感谢ubercart！）我使用了你的解决方案。针对当前情况进行了修改：http://jsfiddle.net/3px7480v/3/ - icicleking

Answer 3

晚回答，只是为了展示使用 jQuery 的不同方法而已。

在这里，您将保留输入状态，并且不会有替换不想要的字符的风险。假设您在其他地方也使用了“+”，而不仅仅是在标签文本中。

$(function () {
    $('label.option').each(function () {
        var label = $(this);
        var input = $('input.form-radio', this);
        var text = label.text();

        // Clean up the label contents.
        label.empty();        

        // Replace the char occurrences.
        text = text.replace(/\+/g, "");

        // Append both the input and the modified text.
        label.append(input).append(text);        
    });
});

演示

- emerson.marini

---

你实际上可以完全删除 detach。将下一行设置文本为空就足够了。 - James Montagne