使用纯JS替换字符串中的最后一个单词，无需jQuery。

Question

我试图改变字符串中的最后两个单词的颜色。

我尝试使用纯CSS，但是没有:last-word(s)选择器可用...

我不想为此单独引入jQuery。

<h1 id="Title">My extra super title</h1>

我尝试使用此方法获取最后两个元素。但似乎 SPLICE 不是最佳选项？

var h1 = document.getElementById("Title").innerHTML;
var h1 = h1.split(" ").splice(-2).join(" ");

- OverSu

---

为什么不直接用span标签包裹最后两个单词，然后按照你的需求样式化span标签呢？ - jaimish11

仅因为我的h1是通过<title>标签自动生成的。 - OverSu

Answer 1

var h1 = document.getElementById("Title").innerHTML;
var lastWords = h1.split(" ").splice(-2).join(" ");
var result = lastWords.trim().fontcolor("green");
const firstPrase = h1.trim().substring(0, lastWords.length - 2);
document.getElementById("Title").innerHTML = firstPrase + result

<h1 id="Title">My extra super title</h1>

- Dhanuka Perera

---

这不会返回包含更改的整个 h1。 - Daniel_Knights

@Daniel_Knights 抱歉，问题已更新。现在请检查我的解决方案。谢谢！ - Dhanuka Perera

Answer 2

你没有调用 h1。同时使用 splice(0, 2) 获取前两个字符。

示例：

//Get el
var h1Text = document.getElementById("title")

//Get last two
var splitText1 = h1Text.textContent.split(" ").splice(-2).join(" ");

//Get first two
var splitText2 = h1Text.textContent.split(" ").splice(0, 2).join(" ");

//Replace HTML
h1Text.innerHTML = splitText2 + ' <span class="black">' + splitText1 + '</span>';

<h1 id="title">w x y z</h1>

- Always Helping

---

抱歉，我忘记复制在 Stack 上 h1 的 ID。 - OverSu

@OverSu 你想用什么替换？你期望的输出是什么？ - Always Helping

我有 <h1>w x y z</h1>，我需要有 <h1>w x <span>y z</span></h1> ;) - OverSu

我做了一个小改变。结果中h1重复了。 :D - OverSu

@OverSu 很高兴听到这个好消息。是的，现在全部修复了。 - Always Helping

Answer 3

You didn't declare id for the element.
I hope this helps:

var title = document.getElementById("Title");
var h1 = title.innerHTML;
var h2= h1.split(" ").splice(-2).join(" ");
var h3=h1.replace(h2,'');
title.innerHTML=h3

var dateSpan = document.createElement('span');
dateSpan.classList.add("red");
dateSpan.innerHTML = h2;
title.appendChild(dateSpan);

.red{
  color:red;
}

<h1 id="Title">My extra super title</h1>

- Hosein Shendabadi

Answer 4

这也可以通过使用模板字面量和split()函数来实现。

let h1 = document.getElementById('Title');
let split = h1.innerText.split(' ');
let html = `<h1>${split[0]} ${split[1]} <span> ${split[2]} ${split[3]} </span></h1>`;

h1.innerHTML = html;

<h1 id="Title">My extra super title</h1>

- fedesc

---

为什么要使用 let？了解一下 const。 - Roko C. Buljan

@RokoC.Buljan 这里为什么很重要？ - fedesc

Answer 5

使用 .splice(-2) 来拼接最后两个单词，您可以使用下面这样的可重用函数，它还会将一个高亮类添加到其中并将其附加到重命名的单词上。如果字符串中的单词数更改，它也应该有效。

function highlightText(id, className) {
  let elm = document.getElementById(id);
  let text = elm.innerText.split(" ");

  const highlight = ' <span class="' + className + '">' + text.splice(-2).join(" ") + '</span>';
  elm.innerHTML = text.join(" ") + highlight;
}

highlightText("Title", "highlight");

.highlight {
  color: #ff00ff;
}

<h1 id="Title">My extra super title</h1>

- Karthikeyan Vedi

---

为什么要污染全局作用域？ - Roko C. Buljan

Answer 6

我已经完成了。但需要很多优化。

var h1 = document.getElementById("Title").innerHTML;
var originalh1 =  h1.split(" ").reverse().slice(2).reverse().join(" ");
var editedh1 = h1.split(" ").splice(-2).join(" ");
document.getElementById("Title").innerHTML = originalh1 + ' <span class="black">' + editedh1 + '</span>';

- OverSu