I would add class when I have different language on paragraph or div like arabic language to make anther font and direction
and I would make it automatic .
<div class="paragraph">
<p>عربي لغة عربية تغير الاتجاه هنا</p>
</div>
<div class="paragraph">
<p>example</p>
</div>
<script type="text/javascript">
var regoo = "example|assignment";
var re = new RegExp(regoo, 'ig');
if($('div, p').text().match(re)) {
$(this).addClass('gold');
}
</script>
It could be done like this
function HasArabicCharacters(text){
var arregex = /[\u0600-\u06FF]/;
return arregex.test(text);
}
var textBlock = document.querySelector('#app p');
if(HasArabicCharacters(textBlock.textContent)){
textBlock.classList.add('arabic');
}
.arabic{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Arabic test</title>
</head>
<body>
<div id="app">
<p class="text">عربي لغة عربية تغير الاتجاه هنا</p>
</div>
</body>
</html>
HasArabicCharacters function is collected from here Regular Expression For Arabic Language
Use square brackets in your regex, and supply all the characters of the arabic language and it will match any of the characters supplied in any order. It is the same as (a|b|c|d) but less code. If it doesnt work try prefixing your characters with a backslash, because they might be classed as special characters. Note, if you use backslash within quotes then you need to use two backslashes per character.
example:
var re = new RegExp('[\\ه\\ن\\ا]','gi')
Related
I want to highlight a word in a page without involving the document.body.innerHTML as this totally alters the functionality of the page.
Is there any other way to do it?
Right now I am using this code to highlight
document.body.innerHTML= document.body.innerHTML.replace(/TEST/g, function(m){
return '<span style="background-color:YELLOW">'+m+'</span>'
}
Thank you
If I understand your problem correctly, I would suggest to retrieve the DOM elements with the relevant content, get the content, and finally surround it with a styled span element.
const $matchedElements = document.querySelectorAll("p");
$matchedElements.forEach(($element) => {
if ($element.innerHTML.match("SampleCollected")) {
const $mySpan = document.createElement("span");
$mySpan.style = "background-color:yellow";
$mySpan.innerHTML = $element.innerHTML;
$element.innerHTML = ""
$element.appendChild($mySpan)
}
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
SampleCollected
</p>
<p>
SampleNotCollected
</p>
<p>
SampleCollected
</p>
<script src="src/index.js"></script>
</body>
</html>
Why I am asking this: There are many questions similar to this one, but none of them are having a satisfactory answer.
Question:
It seems like, using Regular expression in a content editable HTML element for replacing specified string badly disturbs user's experience with caret positioning
What happens after using Ragex:
1:'Enter key'(earlier which was able to add line break) will stop working.
2:During any manual edit, caret assumes initial position (which is beginning of the editable HTML element).
So far the answers that I was able to find, have bugs!
My snippet with contenteditable="true" HTML element
```
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" width="device width, initial-scale=1.0">
<style>
#spanone{
color:red;
}
#spantwo{
color:yellow;
}
</style>
</head>
<body style="background:royalblue;">
<p id="inp" contenteditable="true" style="height:90vh; width:90vw; background:black; color:white; font-weight:bold;">
{This} [is] {HTML} [rendered], {replaced string} [using ragex]! edit me!
</p>
<script>
$(function(){
$("#inp").on("input" , function(){
var str = $("#inp").text();
var new_str = str.replace(/(\[(?:[\w\s]*)*\])/g, function(match){
return match.replace(/(\w+)/g, '<span id="spanone">$1</span>');
});
var result = new_str.replace(/(\{(?:[\w\s]*)*\})/g, function(match){
return match.replace(/(\w+)/g, '<span id="spantwo">$1</span>');
});
$("#inp").html(result);
});
});
</script>
</body>
</html>
Why won't the text inside the tags change, when it clearly should change? Can anyone help?
Here is my HTML and JS code:
function pickStick(); {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
And...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<br><br>
<div id="weapon">You see a stick. You can pick it up.</div>
</body>
</html>
You have a semicolon after your function name ( function pickStick(); ), you need to remove that:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
Then you may want to remove the href from your <a> so it doesn't move to a new page, or replace it with href="#":
pick it up.
You need to update 2 things
JS update
Replace
function pickStick(); {
with
function pickStick() {
Markup update
Replace
<a href="" onclick="pickStick()">
with
<a href="#" onclick="pickStick()">
or
<a href="javascript:void(0);" onclick="pickStick()">
For reference - http://plnkr.co/edit/wu1y9OA1Ml1gQPCEQImB?p=preview
This works:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
<div id="weapon">You see a stick. You can pick it up.
So the problem is probably due to you having a semi-colon in your function definition, or the missing pound sign (#) in your anchor.
I'm trying to use JQuery to achieve the following logic:
Replace the string value of [url="http://www.google.com"]Google[/url] with Google
Please see my HTML page below. The problem is that on pressing the button, the orignal text is just pasted and no RegEx replacements are made.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//<\[\/url\]', '$2');
$('#mydiv').html(newtext);
}
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="oldtext">
Try this funky new search engine:
[url="http://www.google.com"]Google[/url]
Or this older one from back in the day:
[url="http://uk.altavista.com"]AltaVista[/url]
</div>
<div>
<input type="button" id="btn" value="Replace" onclick="processJs(); return false;" />
</div>
<div id="mydiv" style="background-color: #eeeeee; border: 2px inset #aaaaaa">
Replaced text will go here.
</div>
</form>
</body>
</html>
I've had this RegEx pattern work using ASP.NET, so I'm not sure where the problem lies when ported to JavaScript...
That is not a valid regex. Use / as modifiers:
/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/
making the function:
function processJs() {
var oldtext = $("#oldtext").html();
var newtext = oldtext.replace(/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/g, '$2');
$('#mydiv').html(newtext);
}
g at the end will repeat it over the text. Here is a fiddle: http://jsfiddle.net/xe2F9/
var newtext = oldtext.replace(/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/g, '$2');
You specify the 'search' as a RegEx object - not a string.
Just using /.../ will automatically crate one transparently.
I've been fiddling with this HTML and javascript for an hour or two now...and I can't figure out why it's not working. I've been trying to learn html, css, and javascript on my own...but I don't think Eclipse is debugging my stuff very well...what's going on?
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Catlard.com</title>
<link rel=StyleSheet href="styles/menuStyle.css" type="text/css"/>
<script type="text/javascript">
function RandomQuote()
{
var quotes= new Array();
quotes[0] = "...believes it may be useful in a time of need."
quotes[1] = "...knows you have a problem, but accepts you anyway."
quotes[2] = "...believes the aliens were involved at Oak Island."
quotes[3] = "...demands to know the location of your hidden rebel base!"
quotes[4] = "...SAW you take the cookie from the cookie jar."
return quotes[Math.floor(Math.random() * 4.99);
}
</script>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Top Frame Layout</h1>
<span style="font-family : Courier;color: #000000;">
Resume
Blog
Arts n' Farts
Contact
Games
</span>
</div>
</div>
<div id="maincontent">
<div class="innertube">
document.write(RandomQuote());
<p style="text-align: center">Blah blah blah </p>
</div>
</div>
</body>
</html>
You have an error on the return quotes line. It should close with )]; not );
Also, each of your quotes[n] lines should end with a semicolon.
And, you should have document.write() inside of script tags.
Your "document.write" line needs to be in a <script> area. You are also missing the "]" bracket on your return line.
You need to check your code a bit more clearly. Perhaps use a syntax highlighting programming editor such as SciTe.
Even though you did not explicity tell us the problem you have (just said its not working) the first thing that jumps out at me is this line:
return quotes[Math.floor(Math.random() * 4.99);
You forgot the ending ] on the array.
You are missing the ending ] in the return command.
2 things:
return quotes[Math.floor(Math.random() * 4.99)];
You're missing the closing tag for your quotes array.
<script language="javascript" type="text/javascript">
document.write(RandomQuote());
</script>
Your javascript has to be wrapped in that script tag, or else it's just rendered as HTML.