I want to remove text in between the some html tags.
For example : <html xmln><head>............<body lang="">after this I need the text
I am trying to remove <html> to <body> part. I have used substring methode and it is working. But in real scenario this <html ..> ... can come multiple times. I have to remove only those and text in between them.
Any help will be appreciated
I have tried substring and regex but not able remove repeated things.
perhaps something like this..
string.replace(/(<html)(.*?)(<body lang="">)/g, '');
Related
I am facing a problem about how to create HTML code examples with Prism, either with pure JS or VueJS.
I need to get something like Bootstrap documentation, with several lines of HTML code displayed, indented, and highlighted.
It works when I put the HTML code directly between the pre/code tags, replacing the < with <.
But I want something more automatic, in which you write a line of code, for example to create a button, and under it, you have the code displayed.
So I am looking for a way to copy this line of code between the pre/code tags.
The problem is that either through the data objects of Vuejs (putting it as a string), or with the appendChild or innerHTML DOM methods, it doesn't works.
With VueJS I get a highlighted line of code but I can't have a multi-line example.
With appendChild and innerHTML, is displayed only the content of the element, for example the text between the button or div tags.
What I need is a way to display all the code, from < of the first tag to > of the last one.
How can I achieve this? Is it possible or is HTML impossible to easily display in the browser?
Here is the easy JS example I am working on.
If you uncomment the line between code tags, you will have the working example, the result I want to get from a more automatic way, just writing once the line of code, and then copying it.
Thanks
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>About</div>
<pre>
<code id="hh">
<!-- <div class="div" data-modifiers='["div--small", "div--big"]'>About</div>-->
</code>
</pre>
<script>
const example = document.getElementById('gg');
const toDisplay = document.getElementById('hh');
// toDisplay.appendChild(example);
hh.innerHTML = gg.innerHTML;
</script>
</body>
</html>
I finally found the solution using only pure JS (no framework).
I share the solution if one day someone needs it.
You can add Prism to get a highlighted displayed code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>
<p>fff</p>
About
</div>
<pre>
<code id="hh" class="language-html">
</code>
</pre>
<script>
const example = document.getElementById('gg').outerHTML;
const toDisplay = document.getElementById('hh');
const regex = /</gi;
renamed = example.replace(regex , '<');
hh.innerHTML = renamed;
</script>
</body>
</html>
I want to make letters like 'å ä ö' visible. I need to replace these letters with ascii code, I guess.
I have tried jquery and javascript, but it did not work. Look at the following code please:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery("#body").html(
jQuery("#body").html().replace('ä', 'å')
);
document.body.innerHTML = document.body.innerHTML.replace(/ä/g, 'å');
</script>
</head>
<body id="body">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.php">Inlägg</a>
</nav>
</div>
</div>
You can achieve what you want using one of the three methods below.
codepen
JQuery
// using a regex on the first parameter of replace,
// picks all the 'ä' instead of the first one
var replaced = $("body").html().replace(/ä/g,'å');
$("body").html(replaced);
JavaScript
// using a regex on the first parameter of replace,
// picks all the 'ä' instead of the first one
document.body.innerHTML = document.body.innerHTML.replace(/ä/g, 'å');
Better Solution
A better alternative to the two previous code sample is to convert your file to the right encoding. In order to do that, make sure you this snippet in the head of you HTML document.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
If that's not working, you also have to make sure the file is saved with encoding UTF-8. If you're using Notepad++, this is done via Encoding > Encode in UTF-8.
I am designing web page in slovak language. To be able to use meantioned language special characters such as á or ž, I am using this html code:
<html lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
Now it works as expected but only when I hard code that kind of text into html file.
As soon as I use jquery to print them it breaks down and those characters are not correctly shown.
$("#myDiv").html("áž");
Am I supposed to specify something in jquery or is there another way to overcome this problem?
You can pass the numeric entity for that character into the html() function to achieve that,
Try a sample,
$('body').html('Ξ');
DEMO
I think you may be use some tricks here
Try this
$("#myDiv").html($("<div>").html("áž").text());
Or simply try this
$("#myDiv").text("áž");
It is quite Easy you can do the following
Use any special Character u want
$("#mydiv").text("*&^&*^*&^*");
Here is the Demo
I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation
I am building an application which needs to select specific text between html, here is an example:
String:
<p>test1 test2test3</p>
RegExp: (Select text between HTML)(test.)
What I want to select is "test1","test2" and "test3" but not "test0"
Is there any solution??Thanks for any helps
Note: I am using JavaScript for RegExp operation.
You can leverage on the browser's ability to parse HTML for you:
var html = '<p>test1 test2test3</p>',
fragment = document.createDocumentFragment(),
div = fragment.appendChild(document.createElement('div'));
div.innerHTML = html;
console.log(div.textContent || div.innerText || '');
Outputs:
test1 test2test3
I wouldn't use Regexes for this kind of task, if all you need is text of <p> tag, I'd use
jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>test1 test2test3</p>
<script>
$(function(){
text = $('p').text();
alert(text);
});
</script>
</body>
</html>
This returns test1 test2test3
Working example: http://jsbin.com/uhadoz/1/
If you'd like a more generic solution, you still can use jquery, just change the selector:
for example, to get the text of all divs, use $('div').text()
But if you have serious parsing needs, you'd better use an HTML parser, google for
JavaScript HTML parser, for example this one: http://ejohn.org/blog/pure-javascript-html-parser/
Read this SO question about parsing HTML with Regexes: RegEx match open tags except XHTML self-contained tags