如何为javascript删除字符串

Posted 2023-05-07

【中文标题】如何为javascript删除字符串

【英文标题】：How to do strike through string for javascript

【发布时间】：2013-08-19 13:36:32

【问题描述】：

我想删除 javascript 中的文本，但我似乎无法让代码正常工作。

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

不胜感激。也想在不使用css的情况下做到这一点。

还应该提到，这些代码行位于另一个名为 totalPackage() 的函数中，该函数在用户单击按钮时运行。我希望在调用其他函数时显示我的消息 hello world!。

【问题讨论】：

你能告诉我们setTextContent吗？您最有可能设置innerText 而不是innerhtml

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

【参考方案1】：

使用 Unicode Character '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, '')

【讨论】：

简单而迷人

我希望您也能提及如何撤消它？ :)

@KickButtowski 将.map(...) 行替换为.filter(char => char !== '\u0336')。基本上从字符串中找到并删除所有\u0336 字符。

您应该将此添加到您的帖子恕我直言。 ??

@KickButtowski 嗯，我不知道转义的 Unicode 字符可以在这样的正则表达式中工作。直到。是的，我想如果它有效，它会更简洁！用你的方法更新了答案。

【参考方案2】：

试试这个

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

【参考方案3】：

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

所以像这样使用

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

【讨论】：

这正是我所拥有的，这就是它所显示的：hello world！

document.getElementById('helloWorld'); 它的 div 或文本框是什么？

html5 不支持罢工

【参考方案4】：

如果#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/

【讨论】：

我应该在上面提到，但是我在另一个名为 totalPackage() 的函数中有这行代码，所以当我调用 totalPackage() 时，我希望它在没有任何 css 的情况下编写带有删除线的字符串。没有 DIV。

DIV 不是 CSS……它是 HTML。你需要学习一些基本的 HTML 和 CSS。

【参考方案5】：

如果您想根据问题中的格式进行处理，您可以创建一个字符串原型方法来处理它。 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

【讨论】：

不，不，不。已经有一个 JavaScript 方法 str.strike():w3schools.com/jsref/jsref_strike.asp.

你真的只是提到w3学校吗？ .strike()是不标准的。

抱歉，我以为您认为问题出在 strike 方法上。这是一个很好的观点，指出 MDN 是一个更好的参考。虽然很明显，OP 的问题是概念性的。

【参考方案6】：

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

你总是可以实现一个 polyfill，比如：

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

【讨论】：

虽然Strike.strike 是非标准的，但<strike> 也已被弃用。 Source

@AustinBrunkhorst 这就是 Chrome 中的默认实现。

在 Chrome 中是的，但这就是问题所在。它不适用于所有浏览器。

@AustinBrunkhorst，这就是我建议使用 polyfill 的原因。即使在 MDN 上，罢工也是使用罢工标签实现的。