Замена последнего слова строки на чистый JS, нет jQuery

Question

Я пытаюсь изменить цвет двух последних слов в строке.

Я пытался в чистом виде CSS, но нет: последнее слово (а) существует, поэтому ...

Я не хочу включать jQuery только для этого.

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

Я пробовал это, чтобы получить последние два. Но кажется, что SPLICE - не лучший вариант?

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

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>

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>

Answer 3

Соедините последние два слова, используя .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>

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>

Answer 5

Я готовлюсь. Но нужна большая оптимизация.

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>';

Answer 6

Вы не объявили идентификатор элемента.
Надеюсь, это поможет:

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>