0

I'm still new to Javascript and I'm using the web for research while trying stuff out. I can however not find any reference on how to create an element at a specific index within the text content of an element.

I'm trying to create a highlighting function via JS, and this is what I've ended with so far

let indexes = []

for (i = 0; i < document.body.innerText.length; i++) {
  if (document.body.innerText[i] == "`") {
    if(document.body.innerText[i - 1] != "\\") {
       indexes.push(i)
    }
  }
}

if (indexes.length % 2 != 0) {
  indexes.splice(indexes.length - 1)
}

console.log(indexes)
`body`, \`body`

The idea is to create a wrapping <span> element from the range of the first index to the second, so on..., I'm baisically looking for a JS functin that would allow me to create an element at that specific index.

E.g.

`body` --> <span>body</span> | `Lorem ipsum, dolor` --> <span>Lorem ipsum, dolor</span>

It's probably just a quick hint and not someting major, but thanks anyways!

Simplicius
  • 2,009
  • 1
  • 5
  • 19

2 Answers2

0

you can insert an HTML as you would insert a regular string to the innerHTML property.

You can read more about it in here: Inserting string at position x of another string

Saar Davidson
  • 1,312
  • 1
  • 7
  • 16
0

I share one simple Example to you...

create one test.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h3 id="submited_name"></h3>
        <input type="text" name="name" id="name"  placeholder="Your Name...">
        <input type="submit" id="infosubmit" name="submit" value="Submit"  onclick="submit_info()">
    </body>
    <script type="text/javascript">
        function submit_info(argument) {
            var name = document.getElementById('name').value;
            document.getElementById('submited_name').innerHTML = name;
        }
    </script>
    </html>

for More Learn about the Javascript Refer below websites which I gives,

https://www.w3schools.com/js/default.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://www.tutorialspoint.com/javascript/index.htm

Harsh Patel
  • 1,032
  • 6
  • 21
  • I'm sorry, but your example isn't the slightest what I'm looking for. I don't want to insert text into a pre-existing element. – Simplicius Sep 27 '20 at 12:42
  • refer this... 1. https://www.tutorialspoint.com/html-dom-createelement-method 2. https://www.geeksforgeeks.org/html-dom-div-object/ 3. https://www.w3schools.com/JSREF/met_document_createelement.asp https://www.codegrepper.com/code-examples/delphi/create+div+javascript @simplicius – Harsh Patel Sep 27 '20 at 12:51
  • search like that, 1. create div element in javascript 2. add html tag element in javascript 3. how to change background using javascript 4. how to change font color using javascript etc etc.... in Google you can find all results – Harsh Patel Sep 27 '20 at 12:54
  • Haha thanks, but this is not what I'm looking for. Please read my question again and then review your answer. – Simplicius Sep 27 '20 at 12:55
  • for Create element at specific index, you have to use looping logic. you cannot find exact same looping logic on internet. – Harsh Patel Sep 27 '20 at 13:00
  • Thanks for your effort, I'm however aware that I need to use a loop, to loop through the list of indexes. – Simplicius Sep 27 '20 at 13:03
  • learn about for loop, while loop, do while loop, if loop, if else loop, nested if loop etc... it is used in all languages like php, java, javascript, .net, python, android, ios... you want to understand only loop concept, & object oriented programming ... if you want to become a Backend Developer then you have to knowlegde about that all Loops and Object Oriented Programming concepts – Harsh Patel Sep 27 '20 at 13:09
  • Haha, thanks. But loops are really nothing hard to understand. – Simplicius Sep 27 '20 at 14:35