时间戳

首页 > 解决方案 > 将元素值更改为其他符号

javascript - 将元素值更改为其他符号

问题描述

今天是个好日子，

我正在尝试通过使用没有任何框架的纯 js 来更改正文中每个元素的值。

例如，您打开控制台插入 js，它会将 body 的每个元素中的所有值更改为其他符号。

所以基本上我可以在网站上为用户获取所有可见的单词，而无需任何 html 降价。

喜欢：

<li>This is text</li> 

t->p
h->s
i->e
s->l
e->o
x->z

将会

<li>Psel el pozp</li>

所以，不知道如何遍历每个元素的值。这是我试过的

var elems = document.body.getElementsByTagName("*");

for (i = 0; i < elems.length; i += 1) {
   if (elems[i].innerHTML.indexOf('<script') != -1){
       console.log(elems[i]);
   } else {
       continue;
   }
}

function validate(element){
    if(element.indexOf('<div') == -1){
        return false;
    } else if(element.indexOf('<script') == -1){
        return false;
    } else {
        return true;
    }
}

但无法让它工作。

更新： 我认为这是我的错。我没有说我需要即时更改值。我的意思是，如果我在控制台中插入代码，它应该遍历每个元素，获取它的值，通过将每个字母替换为另一个字母来更改值，然后将值放回而不是旧的。最终它在网络上看起来不同。先感谢您。

所以我需要代码循环遍历每个元素，获取它的值，用它做一些事情，然后把它放回去。 粗体字是我不能做的。提前感谢大家。

标签： javascript

解决方案

.textContent & .innerText

"So basically I can get all the visible words on the website for user without any HTML markdown." ✱</sup>
✱</sup>Upper case and grammatical corrections are mine

Text can be extracted from HTML easily just by using .textContent or .innerText properties. There are some significant differences between results and minor inconsistency of standards, see links above and demo below.

Demo

Run the demo and click the Results link or scroll to the very bottom

var content = document.getElementById('content');

var tC = document.getElementById('textContent');
tC.textContent = content.textContent;

var iT = document.getElementById('innerText');
iT.innerText = content.innerText;
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html {
      scroll-behavior: smooth
    }
  </style>
</head>

<body>
  <div id='content' class='container'>
    <header id='top' class='container'>
      <hgroup class='row'>
        <h1>Home</h1>
      </hgroup>
      <nav class='row'>
        <ul class='nav col-12'>
          <li class='p-2'><a href='#a0'>Section 1</a></li>
          <li class='p-2'><a href='#a1'>Section 2</a></li>
          <li class='p-2'><a href='#a2'>Section 3</a></li>
          <li class='p-2'><a href='#a3'>Article</a></li>
          <li class='p-2'><a href='#a4'>Results</a></li>
        </ul>
      </nav>
    </header>
    <hr>
    <main class='container'>
      <section id='a0' class='row'>
        <article class='col-12'>
          <h2>Section I</h2>
          <p>Lorem ipsum dolor sit amet, eos nonumy omittam ex. No dicant tibique accusamus pri, sed omnis posidonium ad. In sea dico honestatis, ex repudiare reprimique delicatissimi mea. Sit dicta moderatius ad, natum convenire usu ei. Est no graece laboramus
            deterruisset. </p>
        </article>
      </section>
      <section id='a1' class='row'>
        <article class='col-12'>
          <h2>Section II</h2>
          <p>Mundi nemore iisque in nec. An dolorum intellegat conclusionemque eos, ad labore omittam mel. Te nam wisi omittam patrioque, oporteat honestatis intellegebat cu mei. Odio cibo omittantur te sed.</p>
        </article>
      </section>
      <section id='a2' class='row'>
        <article class='col-12'>
          <h2>Section III</h2>
          <p>Alii commodo ne sea, eu pro legimus signiferumque. At mei nisl facete adolescens, et mel eleifend voluptatibus. Qui ei wisi sonet noster, est solum posidonium scribentur et, sea nobis verear ut. Nemore admodum usu ne.</p>
        </article>
      </section>
      <hr>
      <section id='a3' class='row'>
        <article class='col-12'>
          <h2>Article</h2>
          <p>Lorem ipsum dolor sit amet, quot erroribus voluptatum in pri. Fabulas vocibus insolens his ex. Vide laboramus ius et, at sit adhuc doctus luptatum, et sit dicat inani democritum. His liber blandit pericula id, an fugit reformidans neglegentur
            cum. Indoctum intellegat et pro, sed fabulas ocurreret eu. Nam ut fabulas inciderint, iracundia conceptam ne vix, quo offendit inimicus torquatos in.</p>
          <div class='row'>
            <aside class='col-4 float-left'>
              <blockquote>
                <p>Duo illum assum discere ne, sed cu posse alterum accusam. Cum an error pertinacia, aperiam deleniti</p>
              </blockquote>
            </aside>
            <p class='col-8'>Ut has elit labores, ex animal delectus efficiendi eos. Id soleat accusamus mel, sint deterruisset his an. Civibus fabellas interpretaris vis ea, dicat aperiri nec ut. Et posidonium dissentias ius, essent quodsi no nam. Mei graece prompta
              quaestio et, pri no voluptua atomorum. Pri id putant graecis. Autem prompta nostrud ut mei, mea ut facilisis expetenda intellegebat.</p>
          </div>
          <div class='row'>
            <p class='col-12'>Quo dolor commune albucius ea, ad novum senserit mediocritatem pro, te nisl quidam intellegam nam. Audire omittam in sea, per veniam noster ne. Duo illum assum discere ne, sed cu posse alterum accusam. Cum an error pertinacia, aperiam deleniti
              sedcu. Pri ut facilisi hendrerit reformidans, id qui modus libris deseruisse, cum primis moderatius ut.</p>
          </div>
        </article>
      </section>
    </main>
    <hr>
    <footer class='container'>
      <nav class='row'>
        <ul class='nav col-12'>
          <li><a href='#top'>HOME</a></li>
        </ul>
      </nav>
    </footer>
  </div>
  <!--End of #content-->
  <hr>
  <hr>
  <section id='a4' class='container'>
    <h2>Results</h2>
    <div class='container'>
      <div class='row'>
        <h3><code>textContent</code></h3>
        <div id='textContent' class='col-10'></div>
      </div>
      <hr>
      <div class='row'>
        <h3><code>innerText</code></h3>
        <div id='innerText' class='col-10'></div>
      </div>
    </div>
  </section>
  <script>
  </script>
</body>

</html>

推荐阅读