What is the process to convert the output HTML tag to ?

Question

What is the process to convert the output HTML tag to ?

Looking for help on how to replace the  tags with  tags within a specific div element:

For example:

<div id="aaa">hello<b>wow</b>!</div>

Need to achieve this using JavaScript:

<div id="aaa">hello<strong>wow</strong>!</div>

If anyone can offer assistance, it would be greatly appreciated. Thanks in advance.

***** My main goal is to change the output HTML code from  to  for W3C validation. Is there a way to accomplish this? **

Alternatively, is there a solution that involves ASP.NET and C# to achieve this conversion?

c#javascript asp.net

Answer 1

Answer №1

Check out the code snippet below:

var main, elements;

main = document.getElementById( 'test' );
elements = main.getElementsByTagName( 'b' );

toArray( elements ).forEach( function ( element ) {
    var newElement = document.createElement( 'strong' );
    newElement.textContent = element.textContent;
    element.parentNode.replaceChild( newElement, element );    
});

where toArray refers to your chosen array-like to array conversion function. I recommend using this one:

function toArray( arrayLike ) { return [].slice.call( arrayLike ); }

See it in action: http://jsfiddle.net/mJSyH/3/

Important: This code may not be compatible with IE8.

Answer 2

Check out the code snippet below:

var main, elements;

main = document.getElementById( 'test' );
elements = main.getElementsByTagName( 'b' );

toArray( elements ).forEach( function ( element ) {
    var newElement = document.createElement( 'strong' );
    newElement.textContent = element.textContent;
    element.parentNode.replaceChild( newElement, element );    
});

where toArray refers to your chosen array-like to array conversion function. I recommend using this one:

function toArray( arrayLike ) { return [].slice.call( arrayLike ); }

See it in action: http://jsfiddle.net/mJSyH/3/

Important: This code may not be compatible with IE8.

Answer 3

Answer №2

If you want to select all the  elements within a specific element, you can gather them and transfer all child nodes to a new  element. After that, simply replace the  tags with the  tags.

<div id="aaa">hello<b>wow</b><b>2</b><b>3</b>!</div>

<script>
  var container = document.getElementById("aaa")
  var find = container.getElementsByTagName("b");
  var bold, strong;

  while (bold = find[0]) {
    strong = document.createElement("strong");

    while (bold.firstChild) {
      strong.appendChild(bold.firstChild);
    }

    bold.parentNode.replaceChild(strong, bold);
  }
</script>

The reason you can assign bold = find[0] repeatedly is because as the  elements are removed from the HTML document, they are also simultaneously eliminated from the NodeList find.

To view the most recent version, visit http://jsbin.com/eqikaj/13/edit.

Answer 4

If you want to select all the  elements within a specific element, you can gather them and transfer all child nodes to a new  element. After that, simply replace the  tags with the  tags.

<div id="aaa">hello<b>wow</b><b>2</b><b>3</b>!</div>

<script>
  var container = document.getElementById("aaa")
  var find = container.getElementsByTagName("b");
  var bold, strong;

  while (bold = find[0]) {
    strong = document.createElement("strong");

    while (bold.firstChild) {
      strong.appendChild(bold.firstChild);
    }

    bold.parentNode.replaceChild(strong, bold);
  }
</script>

The reason you can assign bold = find[0] repeatedly is because as the  elements are removed from the HTML document, they are also simultaneously eliminated from the NodeList find.

To view the most recent version, visit http://jsbin.com/eqikaj/13/edit.

Answer 5

Answer №3

By utilizing jQuery, you have the ability to locate every b element within the confines of your parent div container and then substitute each of them with strong, while duplicating the inner text of the original tag:

$('#xyz b').each(function() {
  $(this).replaceWith($('<strong>' + this.html() + '</strong>');
});

Answer 6

By utilizing jQuery, you have the ability to locate every b element within the confines of your parent div container and then substitute each of them with strong, while duplicating the inner text of the original tag:

$('#xyz b').each(function() {
  $(this).replaceWith($('<strong>' + this.html() + '</strong>');
});

Answer 7

Answer №4

If you're a fan of jQuery, here's a simple way to achieve the same result:

$('b').replaceWith(function() {
        return $('<strong>').html($(this).html());
});

All you need to do is get your hands on the jQuery library, either by downloading it or including it somehow. Check out this link for more info: http://docs.jquery.com/Downloading_jQuery

Answer 8

If you're a fan of jQuery, here's a simple way to achieve the same result:

$('b').replaceWith(function() {
        return $('<strong>').html($(this).html());
});

All you need to do is get your hands on the jQuery library, either by downloading it or including it somehow. Check out this link for more info: http://docs.jquery.com/Downloading_jQuery

Answer 9

Answer №5

One way to address this is by utilizing regular expressions:

var element = document.getElementById("aaa");
element.innerHTML = element.innerHTML.replace(/<b[^>]*>(.*?)<\/b>/ig, '<strong>$1</strong>');

While this method may not necessarily be faster than the alternatives mentioned earlier, the difference in performance is minimal (and often irrelevant in practical scenarios). Feel free to use whichever approach you deem most suitable.

Important: Instead of using a function like toArray, you can achieve the same outcome with the following code:

Array.forEach(elements, function() {  ... })

Answer 10

One way to address this is by utilizing regular expressions:

var element = document.getElementById("aaa");
element.innerHTML = element.innerHTML.replace(/<b[^>]*>(.*?)<\/b>/ig, '<strong>$1</strong>');

While this method may not necessarily be faster than the alternatives mentioned earlier, the difference in performance is minimal (and often irrelevant in practical scenarios). Feel free to use whichever approach you deem most suitable.

Important: Instead of using a function like toArray, you can achieve the same outcome with the following code:

Array.forEach(elements, function() {  ... })

What is the process to convert the output HTML tag <b></b> to <strong></strong>?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Infinite scrolling dropdown feature in the <Select> widget

Unable to display HTML content on a page using the foreach callback in JavaScript

Visualizing Data with Flot.js - A Comprehensive Guide

Is the search feature in the Bootstrap 4 dual listbox plugin experiencing issues?

A type guard for generics in TypeScript

Accessing Jquery's $.get function is currently not possible

Express app throws an error when testing with Jest due to Multer being undefined

Guide on inserting a canvas image among the various jsPdf components

Affixing a navigation bar to the top while scrolling

Ways to prevent mouse selection in an input field without disabling or making it read-only

Node.js Express Timer with API for Initializing/Stopping/Reinitializing

Ways to activate a javascript function upon the visibility of a button changing

What is the connection between the forms authentication provider and the membership provider in ASP.NET MVC?

Encountered an issue with instafeed.js due to CORS policy restrictions

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

How to designate a try / catch block as asynchronous in TypeScript / JavaScript?

What is causing the issue with Next.js Json.map function not functioning correctly?

Restrict certain sections of the website to authorized users only

Creative Solution for Nested Forms

Issue encountered with an Asp.net website while being hosted on the server