如何在JavaScript中实现删除线字符串

Question

我想在Javascript中添加删除线，但是好像无法让代码起作用。

var message = document.getElementById('helloWorld');
setTextContent(message, 'hello world!'.strike());

希望能得到任何帮助。同时也想在不使用CSS的情况下完成它。

还应该提到，这些代码行位于另一个名为totalPackage()的函数内部，当用户单击按钮时运行。我希望我的消息＜strike＞Hello world!＜/strike＞在调用这个其他函数时显示出来。

- SS SS

---

你能展示一下 setTextContent 吗？你很可能设置的是 innerText 而不是 innerHTML。 - Austin Brunkhorst

看看我的答案。它为您提供一个可工作的示例...并且不使用任何CSS。 - ktm5124

Answer 1

使用Unicode字符“COMBINING LONG STROKE OVERLAY”（U+0336）

E̶x̶a̶m̶p̶l̶e̶

function strikeThrough(text) {
  return text
    .split('')
    .map(char => char + '\u0336')
    .join('')
}

<input oninput="document.querySelector('#output').innerText = strikeThrough(this.value)" placeholder="type here"><p id="output"></p>

要撤销它，只需从字符串中删除所有的\u0336字符。

string.replace(/[\u0336]/g, '')

- laggingreflex

---

简单易懂，却又令人着迷。 - Kick Buttowski

@KickButtowski，请将.map（...）行替换为.filter（char => char！=='\ u0336'）。基本上从字符串中查找并删除所有\ u0336字符。 - laggingreflex

我用了另一种方法 string.replace(/[\u0335]/g, "")，这样更简洁吗？ - Kick Buttowski

@KickButtowski 嗯，我不知道转义的Unicode字符可以在正则表达式中像那样工作。今天我学到了。是的，如果它有效，我想这更加简洁！使用您的方法更新了答案。 - laggingreflex

string.replace(/[\u0336]/g, '') not s̶t̶r̶i̶n̶g̶.̶r̶e̶p̶l̶a̶c̶e̶(̶/̶[̶\̶u̶0̶3̶3̶5̶]̶/̶g̶,̶ ̶'̶'̶) - Ste

Answer 2

试一下这个

var message = document.getElementById('helloWorld');
message.innerHTML='<del>helloworld</del>'

- Amith

Answer 3

如果#helloWorld是一个DIV，那么你可以设置它的innerHTML属性。

<div id="helloWorld"></div>

function setTextContent(msg, str) {
    msg.innerHTML = str;
}

var message = document.getElementById('helloWorld');
setTextContent(message, 'hello world!'.strike());

这里有一个演示用的小工具：http://jsfiddle.net/SXFLw/

- ktm5124

---

我之前应该提到，但是我有这一行代码在另一个名为totalPackage()的函数中，所以当我调用totalPackage()时，我希望它写入带有删除线的字符串而没有任何CSS。没有DIV。 - SS SS

DIV不是CSS，而是HTML。你需要学习一些基本的HTML和CSS知识。 - ktm5124

Answer 4

如果您想根据您的问题格式来处理它，您可以创建一个字符串原型方法来处理它。String.strike()是非标准的，您可能会遇到浏览器兼容性问题。

String.prototype.strike = function() {
    return '<div class="strike">'+ this +'</div>';
};

// <div class="strike"> hello world! </div>
var test = 'hello world!'.strike();

然后在 CSS 中，您可以创建一个名为 strike 的类，如下所示。

.strike {
    text-decoration: line-through;
}

JSFiddle

{{链接1：JSFiddle}}

- Austin Brunkhorst

---

不，不，不。已经有一个JavaScript方法str.strike()了：http://www.w3schools.com/jsref/jsref_strike.asp。 - ktm5124

你真的刚刚参考了w3school吗？.strike()是非标准的。 - Austin Brunkhorst

抱歉，我以为你认为问题出在“strike”方法上。指出MDN是更好的参考资料是一个很好的观点。不过显然，OP的问题是概念性的。 - ktm5124

Answer 5

strike() 的正确语法是 str.strike()

因此使用方式如下：

 setTextContent(message, 'hello world!'.strike());

- Bindiya Patoliya

---

这正是我所拥有的，并且它显示的是：<strike>你好，世界！</strike> - SS SS

document.getElementById('helloWorld'); 是 div 还是文本框？ - Bindiya Patoliya

strike 标签在 HTML5 中不再被支持。 - Kick Buttowski

Answer 6

JavaScript中已经有一个strike方法，但它似乎不是标准的。 正常的实现只是将字符串包装在strike标签中。但请注意，结果不再是简单的文本，因此将文本节点的textContent属性设置为'some string'.strike()将不会产生预期的结果。它只会在文档中以纯文本形式显示标记。

您可以随时实现一个polyfill，例如：

if (!(typeof String.prototype.strike === 'function')) {
    String.prototype.strike = function () {
        return '<strike>' + this + '</strike>';
    };
}

- plalx

---

虽然 Strike.strike 是非标准的，但 <strike> 也已经被弃用。来源 - Austin Brunkhorst

@AustinBrunkhorst 那是Chrome的默认实现。 - plalx

是的，在Chrome中可以，但这就是问题所在。它并不适用于所有浏览器。 - Austin Brunkhorst

@AustinBrunkhorst，这就是为什么我建议使用 polyfill。即使在 MDN 上，strike 也是用 strike 标签实现的。 - plalx