CONVERSION OF STRING USING RECOVERY

I would like to create a program that uses recursion to switch all HTML text (tagged range) to [num]
It's my first time using Javascript, so it's hard to achieve my goal.
For example,

entering
Nice to meet you
This is h_chicKer
Thank you for your cooperation.

=>
output
NUM:1
NUM:2
NUM:3

I would like to do so.
An example HTML to convert is
https://teratail.com
This is the front page of the .
I've made a model for recursion.

<script type="text/javascript">

    function changeStr(element){

    if(element==null){
    variable= document.body;
    }
    if(element.childNodes.length>0){
    changeColor(element.firstChild);
    }
    if(element.nodeType==1){
    // Write the processing here?
    }
    }

  </script>

If anything happens, we will supplement it at any time.
Thank you for your cooperation.

javascript html

2022-09-30 21:10

3 Answers

It is useful to create functions such as Create a bulletgetElementsByFunction to collect the affected nodes recursively.
(After collection, it can be handled in a simple loop.Even if you don't do this, getElementsByFunction will be helpful as an example of recursively exploring nodes.)
The following example replaces anything other than a new line with a text node below the node specified in getElementsByFunction.

<html>
<head>
<title>example</title>
<script type="text/javascript">
vargetElementsByFunction=function(root, func){
  var result=[];
  (function(node){
    varkids = node.childNodes;
    for (vari=0,l=kids.length;i<l;i++){
      if(func(kids[i])) result[result.length] = kids[i];
      if(kids[i].hasChildNodes()) arguments.callee(kids[i]);
    }
  }) (root);
  return result;
};
</script>
<script type="text/javascript">
function isTextNode(node){
	return node.nodeType==3;//TEXT_NODE
}
function test() {
	var nodes = getElementsByFunction( document.getElementById("block1"), isTextNode);
	varj = 1;
	for (vari=0;i<nodes.length;++i){
		if(nodes[i].nodeValue!="\n")
			nodes[i].nodeValue="NUM:"+j++;
	}
}
</script>
</head>
<body>
<divid="block1"><p>text1</p>
<a href=".">text2</a>
<a href=".">text3</a>
</div>
<button onclick="test()">Run</button>

</body>
</html>

2022-09-30 21:10

For example, in the case of , you can implement it with the code below.

<divid="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
</div>

If you don't agree with the intent of the question, please leave a comment.

function changeStr(element){
  if(element==null){
    variable= document.getElementById("target");
  }

  if(element.nodeType==1){
    Array.prototype.forEach.call(element.children, function(e,i){
      e.textContent="NUM:"+(i+1);
    });
  }
};

function changeStr(element){
  if(element==null){
    variable= document.getElementById("target");
  }

  if(element.nodeType==1){
    Array.prototype.forEach.call(element.children, function(e,i){
      e.textContent="NUM:"+(i+1);
    });
  }
};

<divid="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">Run</button>

[Before execution]

<divid="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>

[After execution]

<divid="target">
  <a>NUM:1</a>
  <a>NUM:2</a>
  <a>NUM:3</a>
  <p>NUM:4<b>NUM:5</b>NUM:6</p>
</div>

What do you think of the above assumptions about [before] and [after]?

function changeStr(element){
  if(element==null){
    variable= document.getElementById("target");
  }

  if(element.nodeType==1){
    var result={};

    result.index=0;
    result.count = 1;
    result.str=element.innerHTML
      .replace(/\s*(<[a-z])/gi, "$1").trim()
      .replace(/>([^<]+)</g, ">NUM:<");

    do{
      result=_numIncrement(result.str, result.index, result.count);

      result.index=result.index+1;
      result.count = result.count+1;
    } while(result.index);

    element.innerHTML = result.str;
  }

  function_numIncrement(_str,_index,_count){
    var_numIndex=_str.indexOf("NUM:",_index);
    var_before=_str.substr(0,_numIndex+4);
    var_after=_str.substr(_numIndex+4);

    if(_numIndex>=0){
      _str=_before+_count+_after;
    }

    return {"str":_str, "index":_numIndex, "count":_count};
  };
};

<divid="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">Run</button>

2022-09-30 21:10

If you're not studying reflexes, jQuery makes it easy.

<!DOCTYPE html>
<html>
  <head>
    <metacharset="UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">/script>
    <script>
      function test() {
        $('#block1*')
          .contents()
          .filter(function(){
            return this.nodeType==3&$.trim($(this).text()) .length>0;
          })
          .each(function(index,value){
            This.nodeValue='NUM:'+(index+1);
          });
      }
    </script>
  </head>
  <body>
    <divid="block1"><p>text1</p>
      <a href=".">text2</a>
      <a href=".">text3</a>
      <p>ddd<b>eee</b>fff</p>
    </div>
    <button onclick="test()">Run</button>
  </body>
</html>

Output

<divid="block1"><p>NUM:1</p>
      <a href=".">NUM:2</a>
      <a href=".">NUM:3</a>
      <p>NUM:4<b>NUM:6</b>NUM:5</p>
</div>

2022-09-30 21:10

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656