Как заменить слова на странице HTML с помощью JS?

Я хочу заменить все слова на веб-странице, соответствующие заданному условию, другими словами, которые различаются в зависимости от заменяемого слова. Например, предположим, что я хочу заменить все слова длиной более 5 букв другим словом, также длиннее 5 букв, которое имеет ту же первую букву, что и слово, которое нужно заменить, и также длиннее 5 букв. буквы. Все слова на странице длиной более 6 букв будут одним из 26 вариантов.

Я попытался добиться этого, взяв весь HTML-код и заменив все слова длиной более 5 букв и вне тега, но мой код изменил гиперссылку и добавил мой JS-скрипт на HTML-страницу. Почему это происходит? Как мне добиться того, чего я хочу?

const segmenter = new Intl.Segmenter("en",{granularity:"word"});
const text = [...segmenter.segment(document.body.innerHTML)];
let test = "";
let alphabets = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
let replacements = "assignment behind controversial desperate eventually foundation growth happiness inside jurisdiction kingdom living million nightmare original president quantum revealed surprising travels understanding vacancies weather xenophobic yourself zombie Assignment Behind Controversial Desperate Eventually Foundation Growth Happiness Inside Jurisdiction Kingdom Living Million Nightmare Original President Quantum Revealed Surprising Travels Understanding Vacancies Weather Xenophobic Yourself Zombie".split(" ");

let intag = false;
for (var word of text){
if ((word.segment= = "<"||word.segment= = ">")&&!intag){
  intag=!intag
}
  test += ((word.segment.length<6)? word.segment:replacements[alphabets.indexOf(word.segment[0])])
}
document.body.innerHTML=test;
console.info(test);

<h1> Replacing words in a webpage </h1>
<a href = "https://stackoverflow.com/posts/78633403">Why won't this work?</a>

В вашем JavaScript также есть символы < и >, но они не разграничивают теги HTML. Короче говоря, вам следует использовать DOM Parser, а не пытаться самостоятельно отличить HTML от текста.

— 19.06.2024 19:48

Вы можете использовать RegExp и replace()

— 19.06.2024 19:53

Зачем пытаться разобрать HTML вручную? И тоже не используйте регулярное выражение ) это вариант-ловушка. Это похоже на попытку разобрать HTML вручную, но хуже во всех возможных отношениях. Используйте TreeWalker, который будет проходить по дереву DOM и может сразу пропускать все HTML-теги, так что вам никогда не придется беспокоиться.

— 19.06.2024 19:56

javascript html if-statement replace

19.06.2024 19:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Захватите все текстовые узлы с помощью createTreeWalker , а затем замените их replaceWith.

function get_text_nodes(el) {
  const nodes = [];
  const rejected_tags = new Set(["SCRIPT", "STYLE"]);
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, node => rejected_tags.has(node.parentNode.tagName) || !node.textContent ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT);
  while(walker.nextNode()) {
    nodes.push(walker.currentNode);
  }
  return nodes;
}

const segmenter = new Intl.Segmenter("en",{granularity:"word"});
const replacements = Object.fromEntries("assignment behind controversial desperate eventually foundation growth happiness inside jurisdiction kingdom living million nightmare original president quantum revealed surprising travels understanding vacancies weather xenophobic yourself zombie Assignment Behind Controversial Desperate Eventually Foundation Growth Happiness Inside Jurisdiction Kingdom Living Million Nightmare Original President Quantum Revealed Surprising Travels Understanding Vacancies Weather Xenophobic Yourself Zombie".split(" ").map(word => [word[0], word]));

for (const node of get_text_nodes(document.body)) {
  const words = [...segmenter.segment(node.textContent)];
  const text = words.map(word => word.segment.length<6 ? word.segment : replacements[word.segment[0]] ?? word.segment).join("");
  node.replaceWith(text);
};

<h1> Replacing words in a webpage </h1>
<a href = "https://stackoverflow.com/posts/78633403">Why won't this work?</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Также alphabets не нужен. Просто создайте объект поиска из строки замены.

19.06.2024 20:42