如何设置一些属性，例如 white space = nowrap 到从内容中提取的 url，然后再分配给 span textContent

Question

javascript中的substring设置属性的任何逻辑。

if (spanArr.length != 0) {
var span = document.createElement('span');
var content = spanArr.join(" ");
var url = content.match(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%\/.\w-]*)?\??(?:[-+=&;%@.\w])#?(?:[\w]))?)/);

    span.textContent = ?;
    divContent.appendChild(span);
  }

如何设置一些属性，例如 white space = nowrap 到从内容中提取的 url，然后再分配给 span textContent。

Answer 1

看来您在这里混淆了一些概念。

white-space: nowrap是一个 CSS 语句，当应用于 HTML 元素时，会导致该元素内的文本和任何内联级别元素在到达元素边缘时不换行到下一行。 这仅适用于具有宽度或无法扩展以容纳内容的选项的块级元素。

CSS 像white-space这样的属性只能应用于 DOM 元素，而不是字符串（比如你的url ）。 在这种情况下， url将是span元素的文本内容（实际上是textContent ）。 white-space将是元素的 CSS 属性。

CSS 属性可以通过 3 种方式应用于 DOM 元素：通过<style>标签或外部 CSS 文件中的 CSS 声明； 通过 HTML style属性，或通过直接操作 JavaScript 中 DOM HTMLElement的相关style属性。

因为你在 JavaScript 工作，所以你想在这里做后者。 如果我正确理解您要执行的操作，则以下代码应该可以满足您的需求：

span.textContent = url;
span.style.whiteSpace = 'nowrap';
divContent.appendChild(span);

注意：在 JavaScript 中， style属性的 CSS 属性是用驼峰式（单词中间有大写字母）而不是 kebab-case（单词之间有连字符）编写的，因为 JavaScript 会将-字符解释为算术运算符，如果你是使用它。

另一个注意事项：应用于span white-space可能不会做很多，因为span不是块级元素。 如果您的目标是使span不包含在divContent元素中，您应该将样式添加到该元素：

divContent.style.whiteSpace = 'nowrap';